<template>
    <el-dialog title="" :visible.sync="dialogTableVisible" :show-close="show ? false : true" :center="true" top="20vh" :before-close="beforeClose" :close-on-click-modal="false">
        <div class="dialogVue">
            <template v-if="show">
                <h2 class="text_center" style="font-size: 18px; padding-bottom: 30px">微信登录成功</h2>
                <div class="text_center" style="color: #AAA; padding-bottom: 30px">正在同步通讯录</div>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage" color="#0147fd" text-color="#FFF"></el-progress>
            </template>
            <template v-else>
                <h2 class="text_center" style="font-size: 18px; padding-bottom: 30px">同步通讯录失败，请尝试重新扫码登录</h2>
                <div class="text_center">
                    <img src="../../../assets/sad.png" style="width: 128px; height: 128px;">
                </div>
                <div class="btn margin40" @click="reLogin">重新扫码登录</div>
            </template>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { toast } from '@/common/tools'
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        },
    },
    data(){
        return {
            show: true,
            percentage: 0,
            timer: null,
            timer1: null,
            timer2: null,
            timer3: null,
            timer4: null,
            id: ""
        }
    },
    computed: {
        ...mapState({
            user: state=> state.user
        })
    },
    methods: {
        beforeClose(){
            this.show = true
            this.percentage = 0
            if(this.timer) this.clearTime()
            if(this.timer1) this.cancelTimer1()
            if(this.timer2) this.cancelTimer2()
            if(this.timer3) this.cancelTimer3()
            if(this.timer4) this.cancelTimer4()
            this.$emit("beforeClose")
        },

        setTime(){
            this.show = true
            this.timer = setInterval(() => {
                this.getStatus()
            }, 3000);
        },

        clearTime(){
            clearInterval(this.timer)
            this.timer = null
        },

        setTime1(){
            this.timer1 = setInterval(() => {
                this.percentage+=1
                console.log("timer1", this.percentage)
                if(this.percentage===40) {
                    console.log("取消定时器1")
                    this.cancelTimer1()
                    this.setTime2()
                }
            }, 100);
        },
        
        cancelTimer1(){
            clearInterval(this.timer1)
            this.timer1 = null 
        },

        setTime2(){
            this.timer2 = setInterval(()=>{
                this.percentage+=1
                console.log("timer2", this.percentage)
                if(this.percentage===60) {
                    console.log("取消定时器2")
                    this.cancelTimer2()
                    this.setTime3()
                }
            }, 3000)
        },

        cancelTimer2(){
            clearInterval(this.timer2)
            this.timer2 = null
        },

        setTime3(){
            this.timer3 = setInterval(()=>{
                this.percentage+=1
                console.log("timer3", this.percentage)
                if(this.percentage===90) {
                    console.log("取消定时器3")
                    this.cancelTimer3()
                }
            }, 3000)
        },

        cancelTimer3(){
            clearInterval(this.timer3)
            this.timer3 = null 
        },

        getStatus(){
            this.$post("/weChatController/getFriendListStatus", {
                bindWeChatName: this.$store.state.port,
                userId: this.user.id
            }).then(res=>{
                if(res.data.code===0) {
                    if(res.data.obj===2) {
                        console.log("同步中")
                    }else if(res.data.obj===1) {
                        console.log("同步成功")
                        if(this.timer) this.clearTime()
                        if(this.timer1) this.cancelTimer1()
                        if(this.timer2) this.cancelTimer2() 
                        if(this.timer3) this.cancelTimer3()
                        this.clearTime()
                        this.setTime4()
                    }else{
                        console.log("同步失败")
                        if(this.timer) this.clearTime()
                        if(this.timer1) this.cancelTimer1()
                        if(this.timer2) this.cancelTimer2()
                        if(this.timer3) this.cancelTimer3()
                        if(this.timer4) this.cancelTimer4()
                        this.show = false
                        this.percentage = 0
                    }
                }else{
                    console.log(res.data.msg)
                }
            })
        },

        setTime4(){
            this.timer4 = setInterval(()=>{
                this.percentage+=1
                if(this.percentage===100) {
                    this.$emit("beforeClose")
                    toast(0, "微信绑定成功，AI已开始代替您自动会话")
                    this.cancelTimer4()
                    this.percentage = 0
                    this.show = true
                }
            }, 100)
        },

        cancelTimer4(){
            clearInterval(this.timer4)
            this.timer4 = null
        },

        reLogin(){
            if(this.timer) this.clearTime()
            if(this.timer1) this.cancelTimer1()
            if(this.timer2) this.cancelTimer2() 
            if(this.timer3) this.cancelTimer3()
            this.$emit("reLogin")
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 400px !important;
    border-radius: 10px;
    box-sizing: border-box
}
:deep(.el-dialog__body) {
    padding: 30px 30px 50px!important;
}
.dialogVue {
    width: 100%;
    border-radius: 5px;
    .btn {
        width: 200px;
        height: 38px;
        border-radius: 6px;
        line-height: 38px;
        text-align: center;
        color: #fff;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
    }
}
</style>